<template>
  <div class="top_o">
    <el-card class="box-card" :style="{height:WindowHeight - cardHeight + 'px'}">
      <el-button size="small" type="primary" @click="newChuChaiBZ">新增出差补助标准</el-button>
      <el-table :max-height="WindowHeight - tabHeight" :data="tableData" style="width:100%" border stripe highlight-current-row>
        <el-table-column label="序号" type="index" align="center" width="70" />
        <el-table-column prop="danwei" label="单位" width="200" header-align="center" />
        <el-table-column prop="bumen" label="部门" header-align="center" />
        <el-table-column prop="zhiwei" label="职务" header-align="center" />
        <el-table-column prop="price" label="补助标准" width="250px" header-align="center">
          <template slot-scope="scope">
            <div class="right">
              <span v-text="scope.row.price" />
              <span>元</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="170" align="center">
          <el-button size="small" type="warning" @click="editChuChaiBZ">编辑</el-button>
        </el-table-column>
      </el-table>
      <component :is="configName" />
      <div class="bottom"><page /></div>
    </el-card>
  </div>
</template>

<script>
import page from '@/views/rfcwgl/components/PageS/index.vue'
import Vue from 'vue'
export default {
  components: { page },
  data() {
    return {
      WindowHeight: document.body.clientHeight,
      configName: '',
      addPath: {
        configName: 'addchauChaibzbz',
        configFilePath: 'rfcwgl/chuChaiBZBZ/append/chuChaiBZBZAppend/index.vue'
      },
      editPath: {
        configName: 'editchauChaibzbz',
        configFilePath: 'rfcwgl/chuChaiBZBZ/edit/chuChaiBZBZEdit/index.vue'
      },
      cardHeight: 84,
      tabHeight: 180,
      addEvection: false,
      isEvection: false,
      isElookover: false,
      isEbj: false,
      tableData: [
        {
          id: 1,
          danwei: '中国华电',
          bumen: '技术部',
          zhiwei: '策划',
          price: 433
        },
        {
          id: 2,
          danwei: '中国华电',
          bumen: '运营部',
          zhiwei: '运营',
          price: 323
        },
        {
          id: 3,
          danwei: '中国华电',
          bumen: '技术部',
          zhiwei: '前端开发',
          price: 450
        }
      ]
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowH.height
    },
    tagsView() {
      return this.$store.state.settings.tagsView
    }
  },
  watch: {
    windowHeight: function(old, newd) {
      this.WindowHeight = old
    },
    tagsView: function(old, newd) {
      this.ifTagsView(old)
    }
  },
  created() {
    this.ifTagsView(this.$store.state.settings.tagsView)
  },
  methods: {
    ifTagsView(data) {
      if (data) {
        this.cardHeight = 84
        this.tabHeight = 180
      } else {
        this.cardHeight = 50
        this.tabHeight = 155
      }
    },
    openWndow(e) {
      this.configName = Vue.component(e.configName, resolve => {
        require([`@/views/${e.configFilePath}`], resolve)
      })
    },
    newChuChaiBZ() {
      this.openWndow(this.addPath)
    },
    editChuChaiBZ() {
      this.openWndow(this.editPath)
    },
    openbj() {
      this.$refs.openbj.openbj()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin: 0px;
}
</style>
